Code Playground

body {
	 background-color: #2b2b2b;
}
 body .container {
	 width: 250px;
	 height: 250px;
	 margin: auto;
	 position: relative;
	 display: flex;
	 justify-content: center;
	 top: 100px;
	 transform: rotate(30deg);
}
 body .container .potion-top {
	 width: 35px;
	 height: 55px;
	 position: absolute;
	 top: -53px;
	 border-radius: 5px;
	 border: 5px solid #fff;
	 border-bottom-color: #2b2b2b;
	 background-color: #2b2b2b;
	 z-index: 3;
}
 body .container .potion-top .potion-top-line {
	 position: absolute;
	 width: 10px;
	 top: 8px;
	 height: 3px;
	 right: 2px;
	 background-color: #fff;
}
 body .container .potion-neck {
	 width: 70px;
	 height: 20px;
	 position: absolute;
	 z-index: 4;
	 top: -30px;
	 border-radius: 5px;
	 border: 5px solid #fff;
	 background-color: #2b2b2b;
}
 body .container .potion-body {
	 height: 200px;
	 width: 200px;
	 border-radius: 50%;
	 border: 8px solid #fff;
	 position: relative;
	 z-index: 2;
}
 body .container .potion-body .potion-content {
	 height: 180px;
	 width: 180px;
	 border-radius: 50%;
	 background-color: #2b2b2b;
	 position: relative;
	 z-index: 2;
	 top: 10px;
	 left: 9px;
	 overflow: hidden;
}
 body .container .potion-body .potion-content::after {
	 content: "";
	 position: absolute;
	 border-radius: 0.5em 0.5em 5.563em 5.563em;
	 width: 270px;
	 height: 250px;
	 bottom: -130px;
	 left: -30px;
	 background-color: #36d8c5;
	 border-radius: 40%;
	 animation: drift 3000ms infinite cubic-bezier(0.5, 0.7, 0.7, 0.5);
}
 body .container .potion-body .potion-content .blob-container {
	 width: 80px;
	 height: 80px;
	 position: absolute;
	 top: 40%;
	 z-index: 4;
	 left: 10%;
}
 body .container .potion-body .potion-content .blob-container .blob-one {
	 position: absolute;
	 top: 20px;
	 left: 25px;
	 height: 20px;
	 width: 20px;
	 border-radius: 50%;
	 background-color: #fff;
}
 body .container .potion-body .potion-content .blob-container .blob-one::after {
	 content: '';
	 height: 10px;
	 width: 10px;
	 border-radius: 50%;
	 position: absolute;
	 transform: translateX(-50%);
	 background-color: #2b2b2b;
	 width: 16px;
	 height: 16px;
	 left: 10px;
	 top: 2px;
}
 body .container .potion-body .potion-content .blob-container .blob-two {
	 position: absolute;
	 top: 30px;
	 left: 0px;
	 height: 20px;
	 width: 20px;
	 border-radius: 50%;
	 background-color: #fff;
}
 body .container .potion-body .potion-content .blob-container .blob-two::after {
	 content: '';
	 height: 10px;
	 width: 10px;
	 border-radius: 50%;
	 position: absolute;
	 transform: translateX(-50%);
	 background-color: #2b2b2b;
	 width: 16px;
	 height: 16px;
	 left: 10px;
	 top: 2px;
}
 body .container .potion-body .potion-content .blob-container .blob-three {
	 position: absolute;
	 top: 50px;
	 left: 20px;
	 height: 20px;
	 width: 20px;
	 border-radius: 50%;
	 background-color: #fff;
}
 body .container .potion-body .potion-content .blob-container .blob-three::after {
	 content: '';
	 height: 10px;
	 width: 10px;
	 border-radius: 50%;
	 position: absolute;
	 transform: translateX(-50%);
	 background-color: #2b2b2b;
	 width: 16px;
	 height: 16px;
	 left: 10px;
	 top: 2px;
}
 @keyframes drift {
	 from {
		 transform: rotate(0deg);
	}
	 from {
		 transform: rotate(360deg);
	}
}

Frontend Forever App